<template>
  <div class="exercise-page">
    <!-- 标题区 - 修改为左上角布局 -->
    
    <!-- 题目展示区，确保 question 存在时才渲染 -->
    <div class="question-section" v-if="question">
        <div class="header-section">
      <div class="title-timer-container">
        <h1>题目练习</h1>
        <div class="timer">
          <span>已用时: {{ formattedTime }}</span>
        </div>
      </div>
    </div>
      <div class="question-header">
        <span class="question-id">题目 ID：{{ question.id }}</span>
        <h2 class="question-content">{{ question.content }}</h2>
        <div class="question-meta">
          <span>学科：{{ question.subject }}</span>
          <span>知识点：{{ question.knowledgePoint }}</span>
        </div>
      </div>
    </div>

    <!-- 作答区域，确保 question 存在时才渲染 -->
    <div class="answer-section" v-if="question">
      <!-- 选择题型 -->
      <div v-if="question.type === 'choice'" class="choice-options">
        <div 
          v-for="(option, index) in question.options" 
          :key="index"
          class="option-item"
        >
          <input 
            :type="question.multiple ? 'checkbox' : 'radio'" 
            :id="'option-' + index"
            :name="question.id"
          >
          <label :for="'option-' + index">{{ option }}</label>
        </div>
      </div>

      <!-- 计算题型 -->
      <div v-else-if="question.type === 'calculation'" class="calculation-input">
        <textarea
          v-model="answer"
          placeholder="请在此输入计算过程和答案"
        />
      </div>

      <!-- 简答题型 -->
      <div v-else class="essay-input">
        <textarea
          v-model="answer"
          placeholder="请详细作答"
          rows="8"
        />
      </div>
    </div>

    <!-- 辅助功能区 -->
    <div class="tool-section">
      <button class="tool-btn hint-btn">
        <i class="material-icons">lightbulb</i>
        提示
      </button>
      <button class="tool-btn calculator-btn">
        <i class="material-icons">calculate</i>
        计算器
      </button>
      <button class="tool-btn draft-btn">
        <i class="material-icons">edit_note</i>
        草稿纸
      </button>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-section">
      <button class="action-btn submit-btn">
        提交
      </button>
      <button class="action-btn save-btn">
        保存草稿
      </button>
      <router-link to="/practice" class="action-btn back-btn">
        返回
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const elapsedTime = ref(0)
const timer = ref(null)
const formattedTime = ref('00:00:00')
// 初始化 question 对象
const question = ref({
  id: '',
  content: '',
  subject: '',
  knowledgePoint: '',
  type: '',
  multiple: false,
  options: []
})
const answer = ref('')

const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  return [hours, minutes, secs]
    .map(v => v < 10 ? `0${v}` : v)
    .join(':')
}

const startTimer = () => {
  timer.value = setInterval(() => {
    elapsedTime.value++
    formattedTime.value = formatTime(elapsedTime.value)
  }, 1000)
}

onMounted(() => {
  startTimer()
  // 这里可以添加获取题目数据的逻辑
  // 例如从路由参数或者 API 获取数据并赋值给 question
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped>
/* 修改标题区样式 */
.header-section {
  display: flex;
  justify-content: flex-start; /* 改为左对齐 */
  align-items: center;
  margin-bottom: 2rem;
}

.title-timer-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.timer {
  color: #8b5cf6;
  font-weight: 500;
  min-width: 100px;
}
.exercise-page {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  padding: 2rem;
  /* background-color: #1a1a1a; */
  min-height: calc(100vh - 70px);
  color: white;
}

.question-section {
  grid-column: 1;
  grid-row: 1;
  background: #252525;
  padding: 1.5rem;
  border-radius: 8px;
}

.question-id {
  font-size: 0.875rem;
  color: #aaa;
}

.question-content {
  font-size: 1.5rem;
  margin: 1rem 0;
}

.question-meta {
  font-size: 0.875rem;
  color: #aaa;
  display: flex;
  gap: 1rem;
}

.answer-section {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: #252525;
  padding: 1.5rem;
  border-radius: 8px;
}

.choice-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: #8b5cf6;
}

textarea {
  width: 100%;
  background: #333;
  color: white;
  border: 1px solid #444;
  padding: 1rem;
  border-radius: 4px;
  resize: vertical;
}

.tool-section {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tool-btn {
  background: #333;
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.hint-btn:hover {
  background: #555;
}

.action-section {
  grid-column: 1 / span 2;
  grid-row: 3;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 2rem;
}

.action-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.submit-btn {
  background: #8b5cf6;
  color: white;
  border: none;
}

.save-btn,
.back-btn {
  background: transparent;
  color: white;
  border: 1px solid #555;
}
</style>